/*ahking作品2005-5*，适用于横轴为日期类型的曲线，如使用请保留*/
//屏幕坐标系概念
/*

0______________   x
 |
 |
 |
 |
 y
 
 */
/*需要在htm中加入元素：
1、<html xmlns:v="urn:schemas-microsoft-com:vml">
2、
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
3、调用方法：在需要的任何地方，加入：
  
 <SCRIPT language="JAVASCRIPT">
  jk_qc = new canvas_xdate(240,100,3,7500,7900,6,"2005-05-06"); 
  //ds_qc = new canvas_xdate(240,60,3,'<%=nby_qcds%>','<%=ney_qcds%>',31,'<%=maxdate%>'); 
  jk_qc.drawscale();
  //jk_qc.drawpolyline('7635,7528,7800,7900,7600,7500,7700,7777,8000,6000,10000,2000');
  jk_qc.drawpolyline('<%=jk_qcy%>')
  //jk_qc.drawline('2005-05-01,7560','2005-05-05,7807');
  //<%for(int i=0;i<ken_oil_tb.Rows.Count-1;i++){
  //   if(((DateTime)ken_oil_tb.Rows[i]["oildate"]).AddDays(1)<(DateTime)ken_oil_tb.Rows[i+1]["oildate"]){%>
  //	   ds_qc.drawdot('<%=((DateTime)ken_oil_tb.Rows[i]["oildate"]).ToShortDateString()%>,<%=ken_oil_tb.Rows[i]["act_today"].ToString()%>');
  //   <%}else{%>
  //       ds_qc.drawline('<%=((DateTime)ken_oil_tb.Rows[i]["oildate"]).ToShortDateString()%>,<%=ken_oil_tb.Rows[i]["act_today"].ToString()%>','<%=((DateTime)ken_oil_tb.Rows[i+1]["oildate"]).ToShortDateString()%>,<%=ken_oil_tb.Rows[i+1]["act_today"].ToString()%>');
  // <%}}%>
  jk_qc=null;
</SCRIPT>
4、后台获取nby,ney方法
  
   nby_qcds=ken_oil_tb.Compute("min(act_today)","").ToString(); 
   ney_qcds=ken_oil_tb.Compute("max(act_today)","").ToString(); 
*/

var ken_scale_attaIdx=0;
function canvas_xdate(group_width,group_height,lnh,nby,ney,lnv,maxdate)
{
 //group_height推荐高度：84/4400
 //lnh:水平线条数；nby：纵坐标起点值；ney:纵坐标终点值
 //lnv:竖直线条数；

 //maxdate:数据库最新日期，格式：yyyy-mm-dd
 

 this.ken_groupid="ken_scale"+ken_scale_attaIdx.toString();
 
 //定义类字段
 this.ken_width=group_width;
 this.ken_height=group_height;
 
 this.ken_lnh=lnh;
 this.ken_nby=nby;
 this.ken_ney=ney;
 
 this.ken_lnv=lnv;
 this.ken_maxdate=maxdate;

 this.ken_divwidth=group_width+10;
 this.ken_divheight=group_height+20;
 
   //定义需要留给写纵坐标值的偏移距离
 this.offset_x=360;//36个像素的距离
   //定义有效宽度
 this.coordx=this.ken_width*10;
 this.validcoordx = this.ken_width*10-this.offset_x;
 
   //定义需要留给写横坐标值的偏移距离
 this.offset_y=50;
   //定义有效高度
 this.coordy=this.ken_height*10;
 this.validcoordy = this.ken_height*10-this.offset_y;
   
  //定义方法，不能加括号
 this.drawscale=draw_scale;
 this.drawscale_m=draw_scale_m;
 this.drawpolyline=draw_polyline;
 this.drawline=draw_line; 
 this.drawdot=draw_dot; 
}
 

//**********************************************画坐标系，时间线每隔10天写一个坐标*****************************************//
 function draw_scale()
 {
       
   ken_scale_attaIdx++;
   var d = new Date(this.ken_maxdate.replace(/(-)/g,"\/"));
     
     //开始画坐标系 
           
    
    document.write("<div align='center' style='background-color:transparent;overflow:hidden;WIDTH:"+this.ken_divwidth+"px;HEIGHT:"+this.ken_divheight+"px'>");
    document.write("<v:group id='"+this.ken_groupid+"' style='WIDTH:"+this.ken_width+"px;HEIGHT:"+this.ken_height+"px' coordsize='"+this.ken_width*10+","+this.ken_height*10+"'>");
            
     
	 
	//----------------------------------------------------------------画竖线（纵轴）
	//计算竖线之间的距离，长度较大时，四舍五入容易产生误差
	//var intervallenx=parseInt(this.validcoordx/(this.ken_lnv-1)+0.5,10); 
	var intervallenx=this.validcoordx/(this.ken_lnv-1); 

	//写入横坐标数值，并画竖线
	 
		
	for(var i=0;i<this.ken_lnv;i++){
		//从上往下画
		var px=this.offset_x+i*intervallenx;//定义竖线横坐标值
		var strTo=px+" "+this.validcoordy;//定义竖线终点坐标，vml下，坐标可以用x,y或x y的形式表示
		
		//开始划竖线，开始坐标：（px 0），终点坐标（strTo）
		document.write("<v:line from='"+px+" 0' to='"+strTo+"' style='position:absolute;z-index:8'>");
		
						
		//定义实线与虚线，每10个刻度写一个
		if(i%10==0){
			document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");//定义线的颜色
						    
		}
		else
		{
			document.write("<v:stroke dashstyle='dot' LineStyle='ThinThin' color='black' />");
			
		}
				
		document.write("</v:line>");
	
	
			   
		//定义写坐标值的位置，每10个刻度写一个，不能和坐标线一起写
		if(i!=0&&i%10==0&&i!=(this.ken_lnv-1)){
		  
		   	//计算日期
	        var dd = new Date(d.getTime()-24*3600*1000*(this.ken_lnv-1-i));
		   			   	                                                                                                               //360为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(this.offset_x+intervallenx*i-180)+";top:"+(this.validcoordy+this.offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:9' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
		else if(i==(this.ken_lnv-1))//最后一个坐标位置稍微前移
		{
		   	
		   	var dd = new Date(d.getTime());
		   	                                                                                                                            //360为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(this.offset_x+intervallenx*i-300)+";top:"+(this.validcoordy+this.offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:9' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
	
		
		
		
	}
   
  
   //----------------------------------------------------------------画横线
 //计算横线之间的距离
 var intervalleny=parseInt(this.validcoordy/(this.ken_lnh-1)+0.5,10); 
 
 //计算刻度值
 var niy=parseInt((this.ken_ney-this.ken_nby)/(this.ken_lnh-1)+0.5,10);
  //写入纵坐标数值，并画横线
 
 var count1=0; 
 var textPoint1=this.ken_ney;
 
 for(var j=0;j<this.ken_lnh;j++)
 {
    //从左往右画
    var strBe1=this.offset_x+" "+j*intervalleny;//定义横线起点坐标
    var strTo1=this.coordx+" "+j*intervalleny;//定义横线终点坐标，vml下，坐标可以用x,y或x y的形式表示
   
    //开始划横线，开始坐标：（strBe1），终点坐标（strTo1）
    document.write("<v:line from='"+strBe1+"' to='"+strTo1+"' style='position:absolute;z-index:8'>");
   
    //定义横线样式
    if(count1%2==0)
    {
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    
	}
	else
	{
	    //本特例不画横虚线
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    //document.write("<v:stroke dashstyle='dot' color='black' LineStyle='ThinThin'/>");
	    
	}
	
	document.write("</v:line>");
	
	   //写入坐标值
	if(j==0)
	{
	    document.write("<v:rect  style='position:absolute;left:0;top:0;WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    }
    
    else if(j==this.ken_lnh-1)
    {
        document.write("<v:rect  style='position:absolute;left:0;top:"+(this.validcoordy-30)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    }
    else
    {
        document.write("<v:rect  style='position:absolute;left:0;top:"+(j*intervalleny-50)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    
    }
    textPoint1=textPoint1-niy;
	count1++;
	
 }
     
     
     
    
   //画图结束
     document.write("</v:group>");
   
     document.write("</div>");
 
 }
 
 
 
//**********************************************画坐标系，时间线每月写一个坐标*****************************************//

 function draw_scale_m()
 {
       
   ken_scale_attaIdx++;
  
   //在后台直接赋值到lnv
   // var sd=new Date(startdate.replace(/(-)/g,"\/"));
   
   // var di =d-sd;
   //var interv=Math.round(di/1000/60/60/24-0.5);
   
 
   var d = new Date(this.ken_maxdate.replace(/(-)/g,"\/"));
   var ds= new Date(Date.UTC(d.getYear(),d.getMonth(),d.getDate())-24*3600*1000*(this.ken_lnv-1));

 
  
     //开始画坐标系 
           
    
    document.write("<div align='center' style='background-color:transparent;overflow:hidden;WIDTH:"+this.ken_divwidth+"px;HEIGHT:"+this.ken_divheight+"px'>");
    document.write("<v:group id='"+this.ken_groupid+"' style='WIDTH:"+this.ken_width+"px;HEIGHT:"+this.ken_height+"px' coordsize='"+this.ken_width*10+","+this.ken_height*10+"'>");
            
     
	 
	//----------------------------------------------------------------画竖线（纵轴）
	//计算竖线之间的距离
	//var intervallenx=parseInt(this.validcoordx/(this.ken_lnv-1)+0.5,10); 
	var intervallenx=this.validcoordx/(this.ken_lnv-1); 

	//写入横坐标数值，并画竖线
	 
		
	for(var i=0;i<this.ken_lnv;i++){
		//从上往下画
		var px=this.offset_x+i*intervallenx;//定义竖线横坐标值
		var strTo=px+" "+this.validcoordy;//定义竖线终点坐标，vml下，坐标可以用x,y或x y的形式表示
		var di=new Date(Date.UTC(ds.getYear(),ds.getMonth(),ds.getDate())+24*3600*1000*i);
		//var di1=new Date(Date.UTC(ds.getYear(),ds.getMonth(),ds.getDate())+24*3600*1000*(i+1));
		if(di.getUTCDate()==1)
		{
		   //开始划竖线，开始坐标：（px 0），终点坐标（strTo）
		    document.write("<v:line from='"+px+" 0' to='"+strTo+"' style='position:absolute;z-index:8'>");
			document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");//定义线的颜色
			document.write("</v:line>");
	
	    }
	    else if(i==(this.ken_lnv-1))
	    {
	        //开始划竖线，开始坐标：（px 0），终点坐标（strTo）
		    document.write("<v:line from='"+px+" 0' to='"+strTo+"' style='position:absolute;z-index:8'>");
			document.write("<v:stroke  dashstyle='dot' color='#c0c0c0' LineStyle='ThinThin' />");//定义线的颜色
			document.write("</v:line>");
	    
	    }
		 	   
		//定义写坐标值的位置，每月写一个，不能和坐标线一起写
		if(di.getUTCDate()==1&&i!=0){
		  
		   		    		   	                                                                                                               //360为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(this.offset_x+intervallenx*i-180)+";top:"+(this.validcoordy+this.offset_y/2)+";WIDTH:360;HEIGHT:160;z-index:9' fillcolor='white'>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='font-size:10pt;word-break:break-all'>");
			document.write(di.getUTCMonth()+1+"/"+di.getUTCDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
		else if(i==(this.ken_lnv-1))//最后一个坐标位置稍微前移
		{
		   	
		   	var dd = new Date(d.getTime());
		   	                                                                                                                            //360为写坐标值的区域的宽度
			document.write("<v:rect  style='position:absolute;left:"+(this.offset_x+intervallenx*i-120)+";top:"+(this.validcoordy+this.offset_y/2)+";WIDTH:120;HEIGHT:160;z-index:9' background-color:transparent>");//定义坐标点数值区域    
			document.write("<v:stroke  color='white'/>");
			document.write("<div align='center' style='background-color:transparent;font-size:8pt;font-style:italic;color:blue;word-break:break-all;filter:alpha(opacity=50)'>");
			document.write(dd.getDate());//写入坐标数值
			//document.write(dd.getMonth()+1+"/"+dd.getDate());//写入坐标数值
			document.write("</div>");
			document.write("</v:rect>");
		}
	
		
		
		
	}
   
  
   //----------------------------------------------------------------画横线
 //计算横线之间的距离
 var intervalleny=parseInt(this.validcoordy/(this.ken_lnh-1)+0.5,10); 
 
 //计算刻度值
 var niy=parseInt((this.ken_ney-this.ken_nby)/(this.ken_lnh-1)+0.5,10);
  //写入纵坐标数值，并画横线
 
 var count1=0; 
 var textPoint1=this.ken_ney;
 
 for(var j=0;j<this.ken_lnh;j++)
 {
    //从左往右画
    var strBe1=this.offset_x+" "+j*intervalleny;//定义横线起点坐标
    var strTo1=this.coordx+" "+j*intervalleny;//定义横线终点坐标，vml下，坐标可以用x,y或x y的形式表示
   
    //开始划横线，开始坐标：（strBe1），终点坐标（strTo1）
    document.write("<v:line from='"+strBe1+"' to='"+strTo1+"' style='position:absolute;z-index:8'>");
   
    //定义横线样式
    if(count1%2==0)
    {
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    
	}
	else
	{
	    //本特例不画横虚线
	    document.write("<v:stroke color='#c0c0c0' LineStyle='ThinThin' />");
	    //document.write("<v:stroke dashstyle='dot' color='black' LineStyle='ThinThin'/>");
	    
	}
	
	document.write("</v:line>");
	
	   //写入坐标值
	if(j==0)
	{
	    document.write("<v:rect  style='position:absolute;left:0;top:0;WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    }
    
    else if(j==this.ken_lnh-1)
    {
        document.write("<v:rect  style='position:absolute;left:0;top:"+(this.validcoordy-30)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    }
    else
    {
        document.write("<v:rect  style='position:absolute;left:0;top:"+(j*intervalleny-50)+";WIDTH:350;HEIGHT:160;z-index:8' fillcolor='white'>");//定义坐标点数值区域    
        document.write("<v:stroke  color='white'/>");
        document.write("<div align='center' style='font-size:9pt;word-break:break-all;'>");
        document.write(textPoint1);//写入坐标数值
        document.write("</div>");
        document.write("</v:rect>");
    
    }
    textPoint1=textPoint1-niy;
	count1++;
	
 }
     
     
     
    
   //画图结束
     document.write("</v:group>");
   
     document.write("</div>");
 
 }
 
 
 
 //**********************************************画折线，适用于连续日期*****************************************//

function draw_polyline(string_y)
{
 

  //string_y:曲线纵座标，用“,”分隔
  //----------------------------------------------------------------计算折线数值点
   	var xn=0;
	var yn=0;
	var kenpoints="";
 
    var array_y=string_y.split(",");
	var arraylen=array_y.length;
	//alert(arraylen); 
	if(arraylen>1)
	{
        //从nby到ney有ney-nby+1个点，有ney-nby个单位区间
	    var vy=this.validcoordy/(this.ken_ney-this.ken_nby);
	    var vx=this.validcoordx/(this.ken_lnv-1);
	
       	for(var i=0;i<arraylen;i++)
	   	{
	    	xn=parseInt(i*vx+0.5,10)+this.offset_x
	    	yn=parseInt((this.ken_ney-array_y[i]*1)*vy+0.5,10)
	    	kenpoints=kenpoints+xn.toString()+","+yn.toString()+" ";
	       
	     }
	   
        //画折线语句
        var ken_polyline="<v:PolyLine  filled='false' Points='"+kenpoints+"' strokecolor='red' strokeweight='1px' style='z-index:9' />";
   
       //alert(this.ken_groupid); 
       eval(this.ken_groupid).insertAdjacentHTML("BeforeEnd", ken_polyline);
 
      
     
   }
  
}
 
 
 //**********************************************画线段，适用于数据不连续*****************************************//


function draw_line(str_from,str_to)
{
 
//str_from：线段起点坐标，以逗号分割；str_to：线段终点坐标，以逗号分割
   	
    var array_from=str_from.split(",");
	var array_to=str_to.split(",");
	//把相关数据转换为日期型
	var begindate= new Date(array_from[0].replace(/(-)/g,"\/"));
	var enddate= new Date(array_to[0].replace(/(-)/g,"\/"));
    var d = new Date(this.ken_maxdate.replace(/(-)/g,"\/"));
    
    //开始时间距最大时间的时间差
    //将时间差转换为天数的方法：Math.round(diff_b/1000/60/60/24-0.5)
    var diff_b=d-begindate;
    var diff_bday=this.ken_lnv-1-Math.round(diff_b/1000/60/60/24-0.5);
    //结束时间距最大时间的时间差
    var diff_e=d-enddate;
    var diff_eday=this.ken_lnv-1-Math.round(diff_e/1000/60/60/24-0.5);
    
    //判断是否连续时间
    var diff_d=enddate-begindate;
    var bool_d1=Math.round(diff_d/1000/60/60/24-0.5);
    
    //从nby到ney有ney-nby+1个点，有ney-nby个单位区间
    var vy=this.validcoordy/(this.ken_ney-this.ken_nby);
    var vx=this.validcoordx/(this.ken_lnv-1);
    
	xnb=parseInt(diff_bday*vx+0.5,10)+this.offset_x;
	ynb=parseInt((this.ken_ney-array_from[1]*1)*vy+0.5,10);
	pb=xnb.toString()+","+ynb.toString();
	
	xne=parseInt(diff_eday*vx+0.5,10)+this.offset_x;
	yne=parseInt((this.ken_ney-array_to[1]*1)*vy+0.5,10);
	pe=xne.toString()+","+yne.toString();
	
	//alert(yne);
    //alert(xnb);
    //画线段语句
   
        var ken_line="<v:line from='"+pb+"' to='"+pe+"' strokecolor='red' strokeweight='1px' style='position:absolute;z-index:8'></v:line>";
   
    eval(this.ken_groupid).insertAdjacentHTML("BeforeEnd", ken_line);

      
}

 //**********************************************画点*****************************************//

function draw_dot(str_dot)
{
 
    var array_dot=str_dot.split(",");
	
	//把相关数据转换为日期型
	var dotdate= new Date(array_dot[0].replace(/(-)/g,"\/"));

    var d = new Date(this.ken_maxdate.replace(/(-)/g,"\/"));
    
    //开始时间距最大时间的时间差
    //将时间差转换为天数的方法：Math.round(diff_b/1000/60/60/24-0.5)
    var diff_d=d-dotdate;
    var diff_dday=this.ken_lnv-1-Math.round(diff_d/1000/60/60/24-0.5);
  
    
    //从nby到ney有ney-nby+1个点，有ney-nby个单位区间
    var vy=this.validcoordy/(this.ken_ney-this.ken_nby);
    var vx=this.validcoordx/(this.ken_lnv-1);
    
    //由于坐标系做了10倍放大，所以前后分别减加5
	xnb=parseInt(diff_dday*vx-5,10)+this.offset_x;
	ynb=parseInt((this.ken_ney-array_dot[1]*1)*vy+0.5,10);
	pb=xnb.toString()+","+ynb.toString();
	
	xne=parseInt(diff_dday*vx+5,10)+this.offset_x;
	yne=parseInt((this.ken_ney-array_dot[1]*1)*vy+0.5,10);
	pe=xne.toString()+","+yne.toString();
		
    //alert(xnb);
    //alert(xne);
    
    //画线段语句
   
        var ken_line="<v:line from='"+pb+"' to='"+pe+"' strokecolor='red' strokeweight='1px' style='position:absolute;z-index:8'></v:line>";
   
    eval(this.ken_groupid).insertAdjacentHTML("BeforeEnd", ken_line);

      
}